<template>
  <Dialog title="预览" v-model="dialogVisible">
    <div class="content-area">
      <div class="img-area">
        <el-image-viewer
          :url-list="[imgurl]"
        />
        {/* <el-image id="imageToRotate" style="width: 400px; height: auto" :src="imgurl" /> */}
      </div> 
    </div> 
  </Dialog>
</template>


<script setup>
const dialogVisible = ref(false) // 弹窗的是否展示

const imgurl = ref('') // 表单 Ref
let newRotation = ref(0)
let newScale = ref(0)
let newScale2 = ref(0)
const rotateFun = ()=>{
  // 获取图片元素
  const imageElement = document.getElementById('imageToRotate');
  // 获取当前的旋转角度，如果没有设置，则默认为0
  let currentRotation = parseFloat(imageElement.style.transform?.match(/rotate\((-?\d+\.?\d*)deg\)/)?.[1] || '0');
      
  // 计算新的旋转角度，并确保在0到360度范围内循环
  newRotation.value = (currentRotation + 90) % 360;

  // 应用新的旋转样式
  imageElement.style.transform += `rotate(${newRotation.value}deg)`;
}
const amplifyFun = ()=>{
  // 获取图片元素
  const imageElement = document.getElementById('imageToRotate');
  // 获取当前的缩放比例，如果没有设置过，默认为1
  let currentScale = parseFloat(imageElement.style.transform?.match(/scale\((\d+(\.\d+)?)\)/)?.[1] || '1');
    
  // 计算新的缩放比例，这里直接放大1倍，即乘以2
  newScale.value = currentScale * 2;
  
  // 应用新的缩放样式
  imageElement.style.transform += `scale(${newScale.value})`;
}
const reduceFun = ()=>{
  // 获取图片元素
  const imageElement = document.getElementById('imageToRotate');
  // 获取当前的缩放比例，如果没有设置过，默认为1
  let currentScale = parseFloat(imageElement.style.transform?.match(/scale\((\d+(\.\d+)?)\)/)?.[1] || '1');
  // 计算新的缩放
  newScale2.value = currentScale * 0.25;
  // 应用新的缩放样式
  imageElement.style.transform += `scale(${newScale2.value})`;
}
/** 打开弹窗 */
const open = async (url) => {
  imgurl.value = url
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style lang="scss" scoped>

</style>
